<template>
  <div class="box">
    <checkitem-edit ref="checkitemEdit" v-on:save-finished="searchCheckitem"></checkitem-edit>
    <div class="filter-container">
      <el-row class="search-row">
        <el-col :span="12">
      <el-input
        placeholder="项目编码/项目名称"
        v-model="search.queryString"
        style="width: 250px"
        class="filter-item"
      >
      <el-button slot="append" icon="el-icon-search" @click="searchCheckitem()"></el-button>
      </el-input>
      </el-col>
      <el-col :span="12" style="text-align: right;">
      <el-button type="primary" class="butT" @click="handleCreateCheckitem()">新建</el-button>
      </el-col>   
      </el-row>
    </div>
    <el-table
      height="620px"
      size="small"
      current-row-key="id"
      :data="dataList"
      stripe
      highlight-current-row
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="code"
        label="项目编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="项目名称"
        align="center"
      ></el-table-column>
      <el-table-column label="适用性别" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.sex == "0" ? "不限" : scope.row.sex == "1" ? "男" : "女"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        label="适用年龄"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="项目说明"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEditCheckitem(scope.$index,scope.row)" size="mini">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteCheckitem(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background     
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import CheckitemEdit from '@/components/checkitem/checkitemEdit'
import { listCheckitem, removeCheckitem } from '@/api/checkitem'

export default {
  data() {
    return {
      dataList: [],//当前页要展示的分页列表数据
      total:0,//总记录数
      //查询参数
      search: {
        pageSize:5,
        pageNum: 1,
        queryString:""
      },
    };
  },
  methods: {
    searchCheckitem() {
      this.loading = true 
      listCheckitem(this.search)
      .then(response => {
        console.log(response)
        this.dataList = response.data.list
        this.total = response.data.total
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    //每页条数改变方法
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.searchCheckitem()
    },
    //当前页改变方法
    handleCurrentChange(val) {
      this.search.pageNum = val
      this.searchCheckitem()
    },
    //删除按钮操作
    handleDeleteCheckitem(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        removeCheckitem(row.id)
        .then(response => {
          this.searchCheckitem()
        })
        .catch(error => {
          this.outputError(error)                
        })
      })
      .catch(() => {})
    },
    async handleCreateCheckitem() {
      this.$refs.checkitemEdit.$emit('openAddCheckitemDialog')    
    },
    async handleEditCheckitem(index, row) {
      this.$refs.checkitemEdit.$emit('openEditCheckitemDialog', row)
    },
    //初始化
    async pageInit() {
      this.searchCheckitem();
    },
    //错误信息
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })      
    }    
  },
  components: { CheckitemEdit },
  created() {
    //调用初始化
    this.pageInit()
  }
};
</script>

<style lang="scss" scoped>
</style>

